<template>
<div>
  <NavBar>
 <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">校园体育场馆</div>
  </NavBar>
  <div class="big_info">
    <div class="info">
      <span>运动订场:</span>
    </div>
    <van-grid :column-num="3">
<!--  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />-->
        <van-grid-item @click="$router.push('school/badminton/agree')">
        <span class="my-icon aaa">&#xe758;</span>
          <span class="text">
            羽毛球大馆
          </span>
        </van-grid-item>

              <van-grid-item >
        <span class="my-icon aaa">&#xe613;</span>
          <span class="text">
            羽毛球小馆
          </span>
        </van-grid-item>

              <van-grid-item >
        <span class="my-icon aaa">&#xe707;</span>
          <span class="text">
            网球
          </span>
        </van-grid-item>

              <van-grid-item >
        <span class="my-icon aaa">&#xe621;</span>
          <span class="text">
            健身房
          </span>
        </van-grid-item>

              <van-grid-item >
        <span class="my-icon aaa">&#xe656;</span>
          <span class="text">
            乒乓球
          </span>
        </van-grid-item>

              <van-grid-item >
        <span class="my-icon aaa">&#xe655;</span>
          <span class="text">
            排球
          </span>
        </van-grid-item>
</van-grid>
      <div class="border_ri" @click="showShare=true"><span class="my-icon add_active">&#xeaf3;</span></div>
  </div>

<van-share-sheet
  v-model="showShare"
  title="一起运动吧~"
  :options="options"
  @select="onSelect"
/>
  <div class="info">
      <span>活动报名：</span>
    </div>
<school_act></school_act>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import School_act from "@/views/School/School_act";
export default {
name: "School",
  components: {School_act, NavBar},
  data(){return{
       showShare: false,
      options: [
        { name: '发起活动', icon: 'https://img01.yzcdn.cn/vant/custom-icon-fire.png' },

      ],
  }},
  methods:{
    return_before(){
      this.$router.push('/home')
    },
     onSelect(option) {
      if(option.name==='发起活动'){
        this.$router.push('/active/hold')
      }
      this.showShare = false;
    },
  },
  created() {
  this.$emit('header',false)
  }

}
</script>

<style scoped>
.info{
  padding: 10px;
  font-size: 14px;
  color: purple;
  background-color: #fafafa;
}
.my-icon{
    font-family: "my-icon" !important;
  font-size: 35px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: 3px;
  /*color: skyblue;*/

}
.text{
  font-size: 12px;

}
.border_ri{
  background-color: #13B194;
  width: 40px;
  border-radius: 30px;
  height: 40px;
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 9999;
}
.add_active{
  color: #fff;
  font-size: 24px;
  margin-left: 8px;
  position: absolute;
  top: 6px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
@font-face {
  font-family: 'my-icon';
  src: url('//at.alicdn.com/t/font_3196381_wqx7tdwwr3k.woff2?t=1646891700262') format('woff2'),
       url('//at.alicdn.com/t/font_3196381_wqx7tdwwr3k.woff?t=1646891700262') format('woff'),
       url('//at.alicdn.com/t/font_3196381_wqx7tdwwr3k.ttf?t=1646891700262') format('truetype');
}
.my-icon {
  font-family: "my-icon" !important;
  /*font-size: 35px;*/
  /*font-style: normal;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*color: wheat;*/
}
.aaa{
  color: burlywood;
}
</style>